<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <link rel="stylesheet" href="./mui/css/mui.css">
    <title>Document</title>
</head>

<body>
    <div class="layout">
        <header>
            <div class="address">
                <span>上海</span>
                <i class="iconfont">&#xe632;</i>
            </div>
            <h3>驴妈妈旅游网</h3>
            <div class="userImg">
                <img src="./images/icon/my.png" alt="">
            </div>
        </header>
        <!-- 轮播图 -->
        <div class="banner">
            <div class="mui-slider">
                <div class="mui-slider-group mui-slider-loop">
                    <!--支持循环，需要重复图片节点-->
                    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="./images/img/banner7.jpg" /></a></div>
                    <div class="mui-slider-item"><a href="#"><img src="./images/img/banner1.jpg" /></a></div>
                    <div class="mui-slider-item"><a href="#"><img src="./images/img/banner2.jpg" /></a></div>
                    <div class="mui-slider-item"><a href="#"><img src="./images/img/banner3.jpg" /></a></div>
                    <div class="mui-slider-item"><a href="#"><img src="./images/img/banner4.jpg" /></a></div>
                    <div class="mui-slider-item"><a href="#"><img src="./images/img/banner5.jpg" /></a></div>
                    <div class="mui-slider-item"><a href="#"><img src="./images/img/banner6.jpg" /></a></div>
                    <div class="mui-slider-item"><a href="#"><img src="./images/img/banner7.jpg" /></a></div>
                    <!--支持循环，需要重复图片节点-->
                    <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="./images/img/banner1.jpg" /></a></div>
                </div>
                <div class="mui-slider-indicator">
                    <div class="mui-indicator mui-active"></div>
                    <div class="mui-indicator"></div>
                    <div class="mui-indicator"></div>
                    <div class="mui-indicator"></div>
                    <div class="mui-indicator"></div>
                    <div class="mui-indicator"></div>
                    <div class="mui-indicator"></div>
                </div>
            </div>
        </div>
        <!-- 轮播图下的导航 -->
        <div class="nav">
            <ul>
                <li>
                    <a href="javascript:;">
                        <img src="./images/icon/nav1.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./images/icon/nav2.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./images/icon/nav3.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./images/icon/nav4.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./images/icon/nav5.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./images/icon/nav6.png" alt="">
                    </a>
                </li>
            </ul>
        </div>
        <div class="info">
            <ul>
                <li>
                    <a href="javascript:;">
                        <img src="./images/icon/j1.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./images/icon/j2.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./images/icon/j3.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./images/icon/j4.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./images/icon/j5.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./images/icon/j6.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./images/icon/j7.png" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./images/icon/j8.png" alt="">
                    </a>
                </li>
            </ul>
        </div>
        <!-- 驴悦亲子 -->
        <div class="buy">
            <div class="left">
                <a href="javascript:;"><img src="./images/img/t1.jpg" alt=""></a>
            </div>
            <div class="right clearfix">
                <div class="top fr">
                    <a href="javascript:;"><img src="./images/img/t2.jpg" alt=""></a>
                </div>
                <div class="bottom fr">
                    <a href="javascript:;">
                        <img src="./images/img/t3.jpg" alt="">
                    </a>
                </div>
            </div>
        </div>
        <!-- 热门活动 -->
        <div class="active">
            <div class="top">热门活动</div>
            <ul>
                <li>
                    <a href="javascript:;">
                        <img src="./images/img/r1.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./images/img/r2.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./images/img/r3.jpg" alt="">
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./images/img/r4.jpg" alt="">
                    </a>
                </li>
            </ul>
        </div>
        <!-- 度周末 -->
        <div class="week">
            <div class="top">
                <ul>
                    <li class="active">度周末</li>
                    <li>度长假</li>
                </ul>
            </div>
            <ul>
                <li>
                    <a href="javascript:;">
                        <img src="./images/img/zm1.jpg" alt="">
                        <div class="text">
                            <h3>[热门活动]驴妈妈温泉季</h3>
                            <h5>听音乐，泡温泉，就找驴妈妈，泉新玩法，全心为你，5折整点秒杀，立减高达100元</h5>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./images/img/zm2.jpg" alt="">
                        <div class="text">
                            <h3>[热门活动]驴妈妈温泉季</h3>
                            <h5>听音乐，泡温泉，就找驴妈妈，泉新玩法，全心为你，5折整点秒杀，立减高达100元</h5>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./images/img/zm3.jpg" alt="">
                        <div class="text">
                            <h3>[热门活动]驴妈妈温泉季</h3>
                            <h5>听音乐，泡温泉，就找驴妈妈，泉新玩法，全心为你，5折整点秒杀，立减高达100元</h5>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./images/img/zm4.jpg" alt="">
                        <div class="text">
                            <h3>[热门活动]驴妈妈温泉季</h3>
                            <h5>听音乐，泡温泉，就找驴妈妈，泉新玩法，全心为你，5折整点秒杀，立减高达100元</h5>
                        </div>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <img src="./images/img/zm5.jpg" alt="">
                        <div class="text">
                            <h3>[热门活动]驴妈妈温泉季</h3>
                            <h5>听音乐，泡温泉，就找驴妈妈，泉新玩法，全心为你，5折整点秒杀，立减高达100元</h5>
                        </div>
                    </a>
                </li>
            </ul>
        </div>
        <!-- 查看更多 -->
        <div class="more">
            查看更多
            <i class="iconfont">&#xe632;</i>
        </div>
        <!-- 页脚 -->
        <div class="footer">
            <div class="left">
                <span>免费注册</span>
                <span>登录</span>
            </div>
            <div class="right">
                <span>TOP</span>
            </div>
        </div>
    </div>
</body>

</html>
<script src="./js/jquery.min.js"></script>
<script src="./js/swipe.js"></script>
<script src="./mui/js/mui.js"></script>
<script src="./js/index.js"></script>